<template>
  <view class="page">
    <view class="head" id="head">
      <view
        class="item"
        :class="{ active: !order || order === 'read_num' }"
        @click="onClickHead('read_num')"
        >热门</view
      >
      <view
        class="item"
        :class="{ active: order && order !== 'read_num' }"
        @click="onClickHead('sort')"
      >
        时间
        <image
          class="time"
          v-if="order && order !== 'read_num'"
          :src="
            imgBaseUrlV2 +
            (dataForm.sort !== 'desc' ? 'remen_time.png' : 'remen_time1.png')
          "
        />
      </view>

      <image
        :src="imgBaseUrlV2 + 'remen_icon.png'"
        class="activeIcon"
        :style="{ left: iconLeft + 'px' }"
        v-show="iconLeft !== -1"
      />
    </view>
    <view class="body">
      <view class="card">
        <view class="hot">
          <view
            class="hot-item"
            v-for="(item, index) in dataList"
            :key="item.id"
            @click="onClickHot(item, index)"
          >
            <article-item
              :thumb="item.cover_img_url"
              :title="item.title"
              :read="item.read_num"
              :index="index"
              :key="item.id"
            ></article-item>
          </view>
        </view>
      </view>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import { delayFunc } from "@/common/util";

import viewModule from "@/common/mixins/view-module";
import { mapState } from "vuex";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import {
  getCollegeTag,
  getCollegeCourseArticleList,
} from "@/common/api/college";
import inputSearch from "@/components/public/input/search";
import articleItem from "@/components/public/item/article";
import qs from "qs";
import { debounce } from "@/utils";
export default {
  mixins: [viewModule],
  components: { inputSearch, articleItem },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    return {
      imgBaseUrl,
      imgBaseUrlV2,
      pageHeadStyle: "",
      iconLeft: -1,
      dataList: [],
      recommentList: [],
      maintenanceList: [],
      girds: [],
      mixinViewOptions: {
        getURL: "/getCollegeCourseArticleList",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: true,
        pullDown: false,
      },
      order: "",
      dataForm: {
        read_num: "",
        create_time: "",
      },
    };
  },
  methods: {
    fetchComplete(err, data = [], res = {}) {
      console.log(arguments, "ar");
      if (err) {
        this.message.error(res.message || "获取数据失败!");
      }

      return data.map((i) => {
        return {
          ...i,
          image: i.img_url,
          newsId: i.id,
          videoPath: i.video_url,
        };
      });
    },

    onClickHot(item, index) {
      this.$Router.push({
        path: "/pages/college/course/index",
        query: {
          ...item,
          title: "热门推荐详情",
        },
      });
    },
    getLeft: debounce(function () {
      console.log(12312);
      this.query
        .select("#head >.item.active")
        .boundingClientRect((data) => {
          console.log(data, "?data");
          if (data) {
            this.iconLeft = data.left + 10;
          }
        })
        .exec();
    }),
    onClickHead(status) {
      let oldOrder = this.dataForm[status];
      this.dataForm.read_num = "";
      this.dataForm.sort = "";
      let tmp = oldOrder === "desc" ? "asc" : "desc";
      let oldO = this.order;
      this.order = status;
      if (status === "sort") {
        if (oldO === status) {
        }
      } else {
        tmp = "desc";
      }
      this.dataForm[status] = tmp;
      if (oldOrder !== this.dataForm[status]) {
        this.getLeft();
      }
      this.getDataList();
    },
  },
  onLoad() {
    const query = uni.createSelectorQuery().in(this);
    this.query = query;
    this.getLeft();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.page {
  min-height: calc(100vh - var(--window-top));
  background-color:  linear-gradient(180deg, #0d1523 0%, #102945 100%);;
  padding-top: 1rpx;
}

.head {
  position: fixed;
  z-index: 95;
  display: flex;
  padding: 0 24rpx;
  width: 100%;
  left: 0;
  top: calc(var(--window-top));
  height: 88rpx;
  background-color: #0D1523;

  >.item {
    display: flex;
    flex: 0 0 auto;
    padding: 10rpx;
    line-height: 68rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: color-white;
    align-items: center;

    >.time {
      width: 34rpx;
      height: 34rpx;
      margin: 0 6rpx;
    }
  }

  >.activeIcon {
    position: absolute;
    width: 36rpx;
    height: 36rpx;
    bottom: 0;
    transition: left 0.3s ease-in-out;
  }
}

.body {
  position: relative;
  padding: 1rpx 0;
  padding-bottom: 100rpx;
  padding-top: 104rpx;
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  .hot {
    display: flex;
    flex-wrap: wrap;

    .hot-item {
      margin-left: 24rpx;
      margin-bottom: 24rpx;
      width: 340rpx;
      height: 370rpx;
      flex: 0 0 340rpx;
      background-color: #3F5270;

      &:nth-child(2n) {
        // margin-right: 24rpx;
      }

      >.icon {
        background-size: cover;
        height: 196rpx;
      }

      >.hot-body {
        display: block;
        width: 100%;
        white-space: normal;
        background-color: #eee;
        padding: 0 20rpx;

        >.name {
          no-wraps(2);
          width: 100%;
          font-size: 28rpx;
          line-height: 44rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #4A4A4A;
          text-align: justify;
          padding-top: 12rpx;
        }

        >.desc {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: color-desc;
          margin-top: 10rpx;

          >.btn {
            float: right;
            height: 40rpx;
            line-height: 36rpx;
            font-size: 24rpx;
            padding: 0 14rpx;
            border-radius: 24rpx;
          }
        }
      }
    }
  }
}
</style>
